<template>
  <div class="matching-box">
    <div class="matching-list-option" v-for="(item,index) in data.AnswerList" :key="index">
      <div class="matching-content">
        {{index+1}}.
        <span
          v-html="item.OptionContent"
          class="option-lis-title"
          style="width: calc(100% - 20px);"
        ></span>
      </div>
      <a-select v-model="answerList[index]" style="width: 90px" placeholder="请选择" disabled>
        <a-select-option
          v-for="(value,key) in data.PiAnswer"
          :key="key"
          :value="key"
        >{{Alphabet[key]}}</a-select-option>
      </a-select>
    </div>
    <div class="matching-piAnswer-list" style="margin-bottom: 5px;">
      <div class="matching-piAnswer-li" v-for="(item,index) in data.PiAnswer" :key="index">
        {{Alphabet[index]}}.
        <span
          v-html="item.OptionAnswerContent"
          class="option-lis-title"
          style="width: calc(100% - 27px);"
        ></span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      Alphabet: [
        'A',
        'B',
        'C',
        'D',
        'E',
        'F',
        'G',
        'H',
        'I',
        'J',
        'K',
        'L',
        'M',
        'N',
        'O',
        'P',
        'Q',
        'R',
        'S',
        'T',
        'U',
        'V',
        'W',
        'X',
        'Y',
        'Z'
      ],
      answerList: []
    };
  },
  props: {
    data: {
      type: Object,
      default: () => {}
    },
    index: {
      type: Number,
      default: 0
    },
    showAnswer: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    showAnswer(e) {
      this.setAnswerShow();
    }
  },
  mounted() {
    this.setAnswerShow();
  },
  methods: {
    setAnswerShow() {
      this.answerList = [];
      if (!this.showAnswer) {
        for (let i = 0; i < this.data.PiAnswer.length; i++) {
          this.answerList.push(undefined);
        }
      } else {
        if(this.data.StuAnswer){
          let queAnswerList = this.data.StuAnswer.split(',');
          for (let key = 0; key < queAnswerList.length; key++) {
            if (queAnswerList[key] == '') {
              this.answerList.push(undefined);
            } else {
              this.answerList.push(Number(queAnswerList[key]));
            }
          }
        }
      }
    }
  }
};
</script>

<style>
</style>